<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var Popup = {
	// state of the popup: closed, open, closing
	state : 'closed',
	
	count : 0,
	
	// data user fill in the popup
	messageFromPopup : 'Hello...',
	messages : [],
	
	// indicating if user pressed OK button
	okWasPressed : false,
	
	submit : function() {
		this.state = 'closing...';
		this.messages.push(this.messageFromPopup);
		this.okWasPressed = true;
		$.modal.close();
	},

	close : function() {
		this.state = 'closing...';
		this.okWasPressed = false;
		$.modal.close();
	},

	openSimplePopup : function (gnatooContext) {
		var data = this;
		data.state = 'open';
		
		// using SimpleModal plugin is simple.
		// with Gnatoo it is even simpler!
		$("#simplePopup").modal({overlayClose:true, onClose: function (dialog) {
			dialog.data.fadeOut('slow', function () {
				dialog.container.slideUp('slow', function () {
					dialog.overlay.fadeOut('slow', function () {
						$.modal.close(); // must call this!
						
						// update model
						data.state = 'closed';
						
						gnatooContext.render();	
					});
				});
			});}});
		
		// make popup resizable and draggable using JQuery UI
		$("#simplemodal-container").resizable();
		$("#simplemodal-container").draggable();
		
		// the simplemodal replace div with placeholder.
		// this is how we mark the placeholder, so gnatoo will now
		// what is original element. parameters are jquery locators.
		gnatooContext.markPlaceholder("#simplemodal-placeholder", '#simplePopup.simplemodal-data');
	}
};
</script>
<style>
#simplemodal-overlay {
	background-color: #000;
}

#simplemodal-container {
	height : 200px;
	width : 300px;
	background-color: #CCC;
	border: 8px solid #444;
	overflow: visible;
}
.popupheader {
	background-color: #222;
	width : 100%;
	
}
.headertitle {
padding: 8px;
font-weight: bold;
}
</style>
<div id="Popup" >
<script type="text/html">
<div>
<span>This is simple example for popup.</span>
<br/>
<span>Current state of the popup: <b>#{.Popup.state}</b></span>
<br/>
<button type="button" onclick="#{.Popup.openSimplePopup(this)}">Open popup</button>
<br/>
<table class="tablesorter" border="0" cellpadding="0" cellspacing="1" >
	<tbody>
	<loop value="#{.Popup.messages}" var="message">
		<tr><td>#{.message}</td></tr>
	</loop>
	</tbody>
</table>
<!-- pup dialog elements in invisible div -->
<div style="display : none;" id="wrapper">
	<div id="simplePopup" 
		style="flow : left; position: relative;">
		<div class="popupheader" id="header"><span class="headertitle">Simple popup</span></div>
		<div style="text-align: center;" id="pbody">
		<span>message:</span>
		<input type="text" value="#{.Popup.messageFromPopup}"></input>
		<br />
		<button type="button" onclick="#{.Popup.submit()}">OK, send!</button>
		<button type="button" onclick="#{.Popup.close()}">CANCEL, dont send.</button>
		</div>
	</div>
</div>
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Popup'); 
	// bind model
	gnatooContext.data['Popup'] = Popup;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


